.f9-menu-popover {
  background-color: white!important;

  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

  .vc-menu {
    padding: 16px 0;
    background-color: white!important;
    @include scroll-bar();

    b {
      font-weight: normal;
    }

    .item * {
      vertical-align: initial;
    }

    .item {
      line-height: 26px;
      color: #282828;
      height: 26px;
      padding: 0 20px;
      margin-top: 5px;

      &.is-disabled {
        opacity: 1;
      }

      .item-con {
        cursor: pointer;

        .text {
          font-weight: 400;
          font-size: 13px;
          &:active {
            color: #02C680;
          }
          &:hover {
            color: #02C680;
          }
          &:focus {
            color: #02C680;
          }
        }

        .count {
          font-style: normal;
          font-weight: 400;
          font-size: 13px;
          color: #02C680;
          margin-left: 5px;
        }

        &:hover {
          color: #02C680
        }

        &.disable {
          color: #8B8C8C;
          cursor: not-allowed;

          .count {
            color: #8B8C8C;
          }
        }
      }
    }

    .more {
      font-size: 14px;
      color: $color-primary;
      line-height: 14px;

      .text {
        cursor: pointer;
      }
    }
  }
}

.f9-menu-popover-dir {
  background-color: white!important;
  width: 1218px;

  .vc-menu {
    background-color: white!important;
    box-sizing: border-box;
    height: 494px;
    flex: 1 1 0;
    overflow: auto;
    display: flex;
    padding: 24px 30px;
    margin-right: 6px;
    margin-bottom: 20px;
    box-shadow: none;

    .item {
      height: 18px;
      line-height: 18px;
      width: 203px;
      padding: 0;

      &:hover {
        background: inherit;
      }
    }

    .content-main {
      .content-col:not(:first-child) {
        margin-top: 40px;
      }

      .title {
        font-weight: bold;
        font-size: 14px;
        color: #000;
        line-height: 14px;
      }

      .content {
        margin-top: 16px;
        display: grid;
        grid-auto-flow: column;
        gap: 12px 0;
        position: relative;
        width: 203px;
        grid-template-columns: 1fr;
      }
    }
  }
}
